<template>
	<view class="select-age">
		<text class="show-val" :class="{fontColor:fontColor}">
			{{showMinVal}}岁
		</text>
		<view class="sliders">
			<slider class="absolute-slider" @changing="getMinVal" @change="getMinVal" min="18" max="50" block-size="20" :backgroundColor="backgroundColor"
			    :activeColor="backgroundColor" block-color="#33CBCC" />
			<slider @changing="getMaxVal" @change="getMaxVal" min="18" max="50" block-size="20" :backgroundColor="backgroundColor" :activeColor="backgroundColor"
			    block-color="#33CBCC" value="50" />
		</view>
		<text class="show-val" :class="{fontColor:fontColor}">
			{{showMaxVal}}岁
		</text>
	</view>
</template>

<script>
	export default {
		props: ["showMinVal", "showMaxVal", "backgroundColor","fontColor"],
		data() {
			return {

			}
		},
		methods: {
			getMinVal(v) {
				this.$emit('getMinVal', v);
			},
			getMaxVal(v) {
				this.$emit('getMaxVal', v);
			}
		},
	}
</script>

<style scoped>
	.select-age {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.fontColor{
		color: #858697;
	}

	.show-val {
		font-size: 24upx;
	}

	.sliders {
		position: relative;
	}

	slider {
		width: 400upx;
	}

	.absolute-slider {
		position: absolute;
		top: 0;
		left: 0;
	}
</style>
